<template>
  <div class="common-warp wh100 warp-bg">
    <Search
      @onSearch="handleSearch"
      :searchOptions="state.data.searchOptions"
      @change="handleChange"
    />
    <Table
      v-bind="state.data"
      @selectCol="handleSelector"
      @onDel="handleDel"
      @onBottomBtn="handleBottomBtn"
    />
    <Add @add="handleAdd" />
    <DelDialog ref="delDialogRef" @del="handleDialogDel" />
    <DelDialog
      subtitle="确认删除选中吗？"
      ref="delListDialogRef"
      @del="handleDialogDelList"
    />
  </div>
</template>

<script lang="ts" setup>
import "@/theme/index.less";
import { ref, reactive, onMounted } from "vue";
import Search from "@/components/search/index.vue";
import Table from "@/components/table/index.vue";
import Add from "@/components/add/index.vue";
import wx from "weixin-js-sdk";
import DelDialog from "@/components/delDialog/index.vue";
import { useRoute, useRouter } from "vue-router";
import {
  useAccessCasbinEmployeeDeleteApi,
  useAccessCasbinEmployeePageApi,
  useAttendTeamEmployeeDeleteApi,
  useAttendTeamEmployeePageApi,
} from "@/api";
import type { CodeName } from "@/types/common";
import { message } from "ant-design-vue";

const router = useRouter();
const route = useRoute();
const delDialogRef = ref();
const delListDialogRef = ref();

const state = reactive({
  data: {
    // 列表数据（必传）
    list: [] as CodeName[],
    header: [
      //开启表格序号
      // {
      //   title: "序号",
      //   key: "key",
      //   align: "center",
      //   customRender: ({ index }) => `${index + 1}`,
      // },
      { dataIndex: "code", title: "工号", ellipsis: true, align: "center" },
      { dataIndex: "name", title: "姓名", ellipsis: true, align: "center" },
      {
        title: "操作",
        align: "center",
        dataIndex: "operation",
        width: 70,
      }, //开启表格操作
    ],
    // 配置项（必传）
    config: {
      rowkey: "code", // antDesign使用rowKey来指定数据列的主键,与删除回传key保持一致
      total: 0, // 列表总数
      loading: false, // loading加载
      isBorder: true, // 是否显示表格边框
      isSelection: true, // 是否显示表格多选
      page: true,
      haveDel: true,
      btnName: "删除",
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [{ label: "名称", value: "name" }],
  },
  employeeCodeList: [] as string[],
  employeeCode: "",
  ruleCode: "",
});

const getData = async () => {
  let {
    data: { pageNum, pageSize, total, list },
  } = await useAttendTeamEmployeePageApi(
    Object.assign(state.data.params, { ruleCode: state.ruleCode })
  );
  state.data.list = list || [];
  state.data.params.pageSize = pageSize;
  state.data.params.pageNum = pageNum;
  state.data.config.total = total;
  state.data.config.loading = false;
};

onMounted(() => {
  state.data.config.loading = true;
  document.title = "已关联人员";
  let { code }: any = route.query;
  state.ruleCode = code;
  getData();
});

// 新增人员
const handleAdd = () => {
  router.push({
    name: "TeamEmployeeAdd",
    query: {
      code: state.ruleCode,
    },
  });
};

const handleDialogDel = async (row: CodeName) => {
  state.employeeCode = row.code;
  await useAttendTeamEmployeeDeleteApi({
    employeeCodeList: [state.employeeCode],
    ruleCode: state.ruleCode,
  });
  message.success("操作成功", 2);
  setTimeout(() => {
    getData();
  }, 2300);
};
const handleDialogDelList = async () => {
  await useAttendTeamEmployeeDeleteApi({
    employeeCodeList: state.employeeCodeList,
    ruleCode: state.ruleCode,
  });
  message.success("操作成功", 2);
  setTimeout(() => {
    getData();
  }, 2300);
};

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any;
  conditions[selectValue] = inputValue;
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData();
};
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  };
};

const handleDel = (row: CodeName) => {
  delDialogRef.value.openDialog(row);
};
const handleSelector = (list: any) => {
  state.employeeCodeList = list.map((item: CodeName) => item.code);
};
const handleBottomBtn = () => {
  if (!state.employeeCodeList.length) {
    message.warning("请至少选择一项");
    return;
  } else delListDialogRef.value.openDialog();
};
</script>
<style scoped lang="less">
.box {
  color: var(--aaa);
  width: 750px;
  height: 50px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.no {
  width: 200px;
  height: 50px;
  background-color: bisque;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
</style>
